<template>
	<view class="root-box root-container root-page-top">
		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<template v-slot:top>
				<uv-navbar @leftClick="goBack" placeholder bgColor="transparent" :fixed="false" title="技师库"></uv-navbar>
				<view class="content">
					<view class="plan-i-box" @click="onGoWithdraw">
						<view class="tixian-box">邀请二维码</view>
					</view>
					<view class="card-box mt-30">
						<view class="card-item card-item-bg-1">
							<view class="fz26">已发福卡数</view>
							<view class="fz60 fzW mt-10">0</view>
						</view>
						<view class="card-item card-item-bg-2">
							<view class="fz26">剩余福卡数</view>
							<view class="fz60 fzW mt-10">0</view>
						</view>
					</view>

					<view class="renyuan-box">
						<view class="fz30 fzW">人员列表</view>
						<view class="search-box">
							<uv-search placeholder="请输入" borderColor="#fff" v-model="keyword" shape="round"
								:showAction="false" bgColor="#fff" :customStyle="{width:'500rpx'}">
							</uv-search>
						</view>
					</view>
				</view>
			</template>
			<view class="loop-ex-container">
				<view class="loop-card" v-for="(item,index) in dataList" :key="item.id">
					<view class="loop-item-box">
						<view class="loop-item-head">
							<uv-avatar :src="item.resume_avatar" size="50" />
							<view class="ml-20"><uv-text :text="item.real_name" size="16" color="#333" bold /></view>
						</view>
						<view class="right-box">
							{{item.id_card_number}}
						</view>
					</view>
					<view class="loop-item-box mt-20 b-b pb-20">工作范围：{{item.community_name}}</view>

					<view class="loop-item-box mt-20">
						<view class="fz20">注册时间：2025-08-17</view>
						<uv-button type="primary" text="编辑" size="mini" color="red" @click="onEdit(item.id)"></uv-button>
					</view>
				</view>
			</view>
		</z-paging>
		<managerNavbar :tabValue="tabValue"></managerNavbar>
	</view>

</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import managerNavbar from '../components/manager_navbar.vue'

	import {
		navigate
	} from '@/util/tools.js';
	import {
		managerTechnicianList,managerTechnicianDetail,editTechnician
	} from '@/api/other.js'
	
	import { useCustomBack } from '@/components/useCustomBack.js'
	const { goBack } = useCustomBack('/pages-user/select_Identity')
	
	const dataList = ref([])
	const paging = ref(null)
	
	const tabValue = ref(1)
	const currentTab = ref(0)
	const tabs = ref(["已结算", "待结算", "待收款"])

	const active = ref(0)
	const keyword = ref(null)

	const onTabChange = (index) => {
		console.log("切换到：", index)
	}
	const change = async (eg = null) => {
		if (eg) {
			currentTab.value = eg.index;
		}
	}
	const onGoWithdraw = () => {
		navigate('/pages-skilled/withdraw/withdraw')
	}
	
	const onEdit=(id)=>{
		navigate('/pages-skilled/technician/technician?id='+id)
	}
	
	const queryList = (pageNo, pageSize) => {
		managerTechnicianList({
			page: pageNo,
			limit: pageSize,
			
		}).then(res => {
			paging.value.complete(res.result.data);
		}).catch(res => {
			paging.value.complete(false);
		})
	}
	
</script>

<style lang="scss" scoped>
	.root-box {
		.content {
			padding: 30rpx;
			box-sizing: border-box;

		}
	}

	.plan-i-box {
		display: flex;
		min-height: 160upx;
		background-color: red;
		justify-content: space-between;
		align-items: center;
		border-radius: 20upx;
		padding: 20upx 160upx;
		box-sizing: border-box;
		color: #fff;
		position: relative;
	}

	.plan-i-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.pi-title {
		font-size: 20upx;
	}

	.pi-num {
		font-size: 36upx;
	}

	.tixian-box {
		position: absolute;
		background-color: #fff;
		right: 0;
		top: 30upx;
		border-radius: 20upx 0 0 20upx;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 5upx 20upx;
		font-size: 20upx;
		color: red;
	}

	.card-box {
		display: flex;
		justify-content: space-between;
	}

	.card-item {
		width: 330upx;
		height: 200upx;
		overflow: hidden;
		background-color: #fff;
		border-radius: 10upx;
		background-position: right bottom;
		background-repeat: no-repeat;
		background-size: 220upx 220upx;
		padding: 30upx;
		box-sizing: border-box;
	}

	.card-item-bg-1 {
		background-image: url('https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0905/e7506202509051526438018.png');
		/* 替换为你的图片路径 */
	}

	.card-item-bg-2 {
		background-image: url('https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0905/02896202509051527172206.png');
		/* 替换为你的图片路径 */
	}

	.renyuan-box {
		margin-top: 30upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.search-box {
		box-sizing: border-box;
	}

	.loop-card {
		margin-top: 30upx;
		background-color: #fff;
		border-radius: 15upx;
		padding: 30upx 30upx;
		box-sizing: border-box;
		color: #666
	}

	.loop-item-box {
		display: flex;
		justify-content: space-between;

	}

	.loop-item-head {
		display: flex;
		align-items: center;

	}

	.right-box {
		height: 40upx;
		background-color: #eaeaea;
		margin-top: 40upx;
		border-radius: 40upx;
		font-size: 24upx;
		line-height: 40upx;
		text-align: center;
		padding: 0 30upx;
	}
	
	.loop-ex-container{
		padding: 0 30upx 120upx;
	}
</style>